<template>
    <div class="wrapper">
        <top-bar>
            <template v-slot:title>
                {{$t('Withdraw record')}}
            </template>
        </top-bar>
        <div class="container">
            <van-list
                :offset="100"
                :class="['record-list',{'empty':!list.length && !error}]"
                v-model:error="error"
                :error-text="$t('Request failed, click reload')"
                v-model:loading="loading"
                :loading-text="`${$t('Loading')}...`"
                :finished="finished"
                :finished-text="$t('No more')"
                @load="getData"
                :immediate-check="false"
            >
                <div v-if="!list.length && !error" class="empty-el">
                    {{$t('No record')}}
                </div>
                <div v-for="(item,index) in list" :key="index" class="record-list-item">
                    <div class="header">
                        <div class="title">{{$t(item.comments)}}</div>
                        <div class="money">{{item.currencySymbol}} +{{item.amount/100}}</div>
                    </div>
                    <div class="main">
                        <div class="col coins">
                            <div class="icon-title">{{$t('Deduct gold coins')}}</div>
                            <div class="content">
                                <div class="coin-num">-{{item.coin}}</div>
                            </div>
                        </div>
                        <div class="col time">
                            <div class="icon-title">{{$t('Application time')}}</div>
                            <div class="content">{{new Date(item.createTime || 0).format("yyyy-MM-dd hh:mm")}}</div>
                        </div>
                        <div v-if="item.finalAuditStatus !== 6" class="col status">
                            <div class="icon-title">{{$t('Application status')}}</div>
                            <div :class="['content',`state-${item.finalAuditStatus}`,{underline:item.failedReason && (item.finalAuditStatus === 3 || item.finalAuditStatus === 5)}]" @click="clickStatus(item)">{{statusKey[item.finalAuditStatus?.toString()]}}</div>
                        </div>
                    </div>
                </div>
                <template #error>
                    <div class="error-el" @click="errorReport">
                        <div>
                            <div class="bg"></div>
                            <div class="text">{{$t('Request failed,Please try again')}}</div>
                            <div class="button">
                                <div class="icon"></div>{{$t('Retry')}}
                            </div>
                        </div>
                    </div>
                </template>
            </van-list> 
        </div>
        <failure-modal v-model:show="failureModalData.show" :buttonText="failureModalData.buttonText" :text="failureModalData.text" @submit="failureModalData.submit" :type="0"/>
    </div>
</template>
<script>
import {BalanceApi} from '@@/api/api.js'
import {reactive,toRefs,onUnmounted,onMounted,inject} from 'vue'
import FailureModal from './modal/failureModal.vue'

export default {
    components:{
        FailureModal
    },
    setup(){
        const vueState = inject('vueState')
        const state = reactive({
            error:false,
            loading:false,
            finished:false,
            pageNumber:1,
            pageSize:20,
            list:[]
        })
        const statusKey = reactive({
            '1':'Pending',
            '2':'Approved',
            '3':'AuditFailed',
            '4':'PaymentSucces',
            '5':'PaymentFailed'
        })
        const failureModalData = reactive({
            show:false,
            buttonText:'I know',
            text:'',
            submit:()=>{
                failureModalData.show = false
            }
        })
        const getData = async ()=> {
            try{
                const res = await BalanceApi.WithdrawRecordV15({pageNumber:state.pageNumber,pageSize:state.pageSize})
                state.list = state.list.concat(res.list)
                if(state.pageNumber < res.pageCount){
                    state.loading = false
                    state.pageNumber ++
                }else{
                    state.finished = true
                }
            }catch(e){
                console.log(e);
                state.loading = false
                state.error = true
                window.trackEvent({pageTitle:'abnormalPage',ev:'showServerPage'})
            }
        }
        const refreshData = ()=> {
            state.list = []
            state.pageNumber = 1
            getData()
        }
        const clickStatus = (item)=> {
            const {finalAuditStatus,failedReason} = item
            if((finalAuditStatus === 3 || finalAuditStatus === 5) && failedReason){
                failureModalData.text = failedReason
                failureModalData.show = true
                if(finalAuditStatus === 3){
                    window.trackEvent({pageTitle:'withdrawRecordPage',ev:'clickAuditFailed'})
                }else{
                    window.trackEvent({pageTitle:'withdrawRecordPage',ev:'PaymentFailed'})
                }
            }
        }
        const errorReport = ()=> {
            window.trackEvent({pageTitle:'abnormalPage',ev:'clickRetryButton'})
        }
        onMounted(()=>{
            vueState.EventEmitter.immediately('afterRegist',getData,vueState.pageStatus.afterRegist)
            window.AdSDK.addEventListener('ad_show',refreshData)
            window.trackEvent({pageTitle:'withdrawRecordPage',ev:'showPage'})
        })
        onUnmounted(()=>{
            window.AdSDK.removeEventListener('ad_show',refreshData)
        })
        
        return {
            getData,
            vueState,
            ...toRefs(state),
            errorReport,
            statusKey,
            failureModalData,
            clickStatus
        }
    }
}
</script>
<style lang="less" scoped>
.wrapper{
    height: 100%;
    background-color: #F5F6F9;
    .container{
        height: 100%;
        overflow-y: auto;
        .record-list{
            padding:0 .16rem;
            .error-el{
                padding-top: .8rem;
                .fc();
                .bg{
                    height:2rem;
                    width: 2rem;
                    background: url(https://dl.b6ad8.xyz/yowin/imgs/me/abnormal_net.svg) no-repeat center;
                    background-size: contain;
                }
                .text{
                    font-size: .14rem;
                    line-height: .24rem;
                    color:#9C9DA6;
                    text-align: center;
                }
                .button{
                    margin: .12rem auto 0;
                    .unique-button();
                    box-shadow: none;
                    height:.4rem;
                    width: 1.42rem;
                    font-size: .16rem;
                    font-weight: bold;
                    .icon{
                        margin-right: .04rem;
                        height: .2rem;
                        width: .2rem;
                        background: url(../../assets/images/icon_refresh.svg) no-repeat center;
                        background-size: contain;
                    }
                }
            }
            &.empty{
                height: 100%;
                padding-top: 1rem;
                /deep/ .van-list__finished-text{
                    display: none;
                }
                .empty-el{
                    display: block;
                    text-align: center;
                    font-size: .16rem;
                    font-weight: 400;
                    color:#C1C1C1;
                    line-height: .28rem;
                }
                &::before{
                    content:'';
                    display: block;
                    height: 2rem;
                    width: 2rem;
                    background: url(https://dl.b6ad8.xyz/yowin/imgs/me/list_empty.png) no-repeat center;
                    background-size: contain;
                    margin:0 auto;
                }
            }
            &-item{
                background-color: white;
                border-radius:.12rem;
                padding: .12rem .14rem .16rem;
                margin-top: .16rem;
                .header{
                    padding-bottom: .1rem;
                    border-bottom:.01rem solid #EDEDEF;
                    .xb();
                    align-items: center;
                    &>div{
                        font-weight: bold;
                        line-height: .28rem;
                    }
                    .title{
                        font-size: .16rem;
                        color:#121314;
                    }
                    .money{
                        font-size: .18rem;
                        color:#00AF66;
                    }
                }
                .main{
                    padding-top: .1rem;
                    color:#9C9DA6;
                    font-size: .12rem;
                    .coin-num{
                        background: url(../../assets/images/icon_coin.svg) no-repeat left center;
                        background-size: .16rem .16rem;
                        padding-left: .2rem;
                        line-height: .2rem;
                    }
                    .col{
                        .xb();
                        align-items: center;
                        &+.col{
                            margin-top: .08rem;
                        }
                        &.coins{
                            .icon-title{
                                background-image: url(../../assets/images/icon_coin_record.svg);
                            }
                        }
                        &.time{
                            .icon-title{
                                background-image: url(../../assets/images/icon_time_record.svg);
                            }
                        }
                        &.status{
                            .icon-title{
                                background-image: url(../../assets/images/icon_status_record.svg);
                            }
                            .state{
                                &-1,&-2{
                                    color:#F99F02;
                                }
                                &-4{
                                    color:#00AF66;
                                }
                                &-3,&-5{
                                    color:#FF4750;
                                }
                            }
                            .underline{
                                text-decoration: underline;
                            }
                        }
                        .icon-title{
                            background-size: .2rem .2rem;
                            background-position: left center;
                            background-repeat: no-repeat;
                            padding-left:.24rem;
                            line-height: .2rem;
                        }
                    }
                }
            }
        }
    }
}
</style>